<!DOCTYPE html>
<html lang="en">
<head>
<title>公共组件 - tcms</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="../public/style/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="../public/style/css/style.css" type="text/css" rel="stylesheet" media="all">  
<link href="../public/style/css/font-awesome.css" rel="stylesheet">  <!-- font-awesome icons --> 
<!-- //Custom Theme files --> 
<!-- js -->
<script src="../public/js/jquery-2.2.3.min.js"></script>  
<!-- //js -->
<!-- web-fonts -->  
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"> 
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700" rel="stylesheet">
<!-- //web-fonts -->
</head>
<body> 

<style>
.widget_stage {
  padding: 50px;
}
.widget_stage_title {
  margin-bottom: 15px;
  font-size: 36px;
}
.widget_stage_desc {
  margin-bottom: 50px;
  color: gray;
  font-size: 15px;
}
.widget_item {
  margin-bottom: 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid #E4E6E9;
}
.widget_item_title {
  margin-bottom: 16px;
  font-size: 22px;
}
.widget_item_cnt {
  *zoom: 1;
}
.widget_item_cnt:after {
  clear: both;
  content: ".";
  display: block;
  line-height: 0;
  font-size: 0;
  visibility: hidden;
  overflow: hidden;
}
.widget_item .qui_dialog,
.widget_item .qui_dropdownMenu {
  position: relative;
  float: left;
  margin: 10px 10px 10px 0;
  top: 0 !important;
  left: 0 !important;
}
.widget_item .tc_inputText {
  margin-bottom: 20px;
}
.widget_item .qui_dialog {
  z-index: 10;
}
</style>

<div class="widget_stage">

  <div class="widget_stage_title">tcms 项目通用组件</div>

  <div class="widget_stage_desc">项目中应当抽取公共的部分以及较为复杂的部分作为组件，方便复用。其中按钮，对话框，遮罩层，下拉菜单，选项卡和文本输入6个组件因为每个项目中都基本会使用到，因此已经由框架预先实现，可以通过修改 UI_dev/project/_var.scss 以及 UI_dev/project/widget 中对应的文件来修改组件的样式，已达到项目的设计要求。</div>

  <div class="widget_item">
    <div class="widget_item_title">按钮 tc_btn</div>
    <div class="widget_item_cnt">
      <a class="qui_btn tc_btn" href="javascript:;">按钮</a>
      <a class="qui_btn tc_btn tc_btn_Ghost" href="javascript:;">按钮</a>
      <a class="qui_btn tc_btn" href="javascript:;" disabled>按钮禁用</a>
      <a class="qui_btn tc_btn tc_btn_Ghost" href="javascript:;" disabled>按钮禁用</a>
    </div>
  </div>

  <div class="widget_item">
    <div class="widget_item_title">对话框 tc_dialog</div>
    <div class="widget_item_cnt">

      <div class="qui_dialog tc_dialog">
        <a class="qui_dialog_close tc_dialog_close" href="javascript:;">×</a>
        <div class="qui_dialog_head tc_dialog_head">
          <div class="qui_dialog_title tc_dialog_title">对话框标题</div>
        </div>
        <div class="qui_dialog_body tc_dialog_body">
          这里是对话框的主体内容。<br />
          通常一个对话框由头部、主体内容和底部栏三部分组成。
        </div>
        <div class="qui_dialog_foot tc_dialog_foot">
          <a class="qui_btn tc_btn" href="javascript:;">确认</a><a class="qui_btn tc_btn tc_btn_Ghost" href="javascript:;">取消</a>
        </div>
      </div>

    </div>
  </div>

  <div class="widget_item">
    <div class="widget_item_title">遮罩层 tc_mask</div>
    <div class="widget_item_cnt">
      <a id="qui_showMask" href="javascript:;">查看效果</a>
    </div>
  </div>

  <!-- 遮罩层效果演示 -->
  <div id="qui_maskWrap" style="display: none;">
		<div class="qui_mask tc_mask"></div>
		<div class="qui_dialog tc_dialog widget_dialogInMask">
			<div class="qui_dialog_head tc_dialog_head">
				<div class="qui_dialog_title tc_dialog_title">对话框标题</div>
				<a class="qui_dialog_close tc_dialog_close tc_icon tc_icon_CloseDialog" href="javascript:;">×</a>
			</div>
			<div class="qui_dialog_body tc_dialog_body">点击任意处关闭</div>
			<div class="qui_dialog_foot tc_dialog_foot">
				<a class="qui_btn tc_btn tc_btn_Blue" href="javascript:;">确认</a>
				<a class="qui_btn tc_btn" href="javascript:;">取消</a>
			</div>
		</div>
	</div>

  <div class="widget_item">
    <div class="widget_item_title">下拉菜单 tc_dropdownmenu</div>
    <div class="widget_item_cnt">

      <div class="qui_dropdownMenu tc_dropdownMenu">
        <ul>
          <li class="qui_dropdownMenu_item tc_dropdownMenu_item">
          <a href="javascript:;" class="qui_dropdownMenu_itemLink tc_dropdownMenu_itemLink">菜单选项一</a>
          </li>
          <li class="qui_dropdownMenu_item tc_dropdownMenu_item">
          <a href="javascript:;" class="qui_dropdownMenu_itemLink tc_dropdownMenu_itemLink">菜单选项二</a>
          </li>
          <li class="qui_dropdownMenu_item tc_dropdownMenu_item">
          <a href="javascript:;" class="qui_dropdownMenu_itemLink tc_dropdownMenu_itemLink">菜单选项三</a>
          </li>
          <li class="qui_dropdownMenu_item tc_dropdownMenu_item">
          <a href="javascript:;" class="qui_dropdownMenu_itemLink tc_dropdownMenu_itemLink">菜单选项四</a>
          </li>
        </ul>
      </div>

    </div>
  </div>

  <div class="widget_item">
    <div class="widget_item_title">选项卡 tc_tab</div>
    <div class="widget_item_cnt">

      <div class="qui_tab tc_tab">
        <div class="qui_tab_title tc_tab_title">
          <ul class="qui_tabNav tc_tabNav">
            <li class="qui_tabNav_item tc_tabNav_item tc_tabNav_item_Curr">
              <a href="javascript:;" class="qui_tabNav_itemLink tc_tabNav_itemLink">选项卡一</a>
            </li>
            <li class="qui_tabNav_item tc_tabNav_item">
              <a href="javascript:;" class="qui_tabNav_itemLink tc_tabNav_itemLink">选项卡二</a>
            </li>
            <li class="qui_tabNav_item tc_tabNav_item">
              <a href="javascript:;" class="qui_tabNav_itemLink tc_tabNav_itemLink">选项卡三</a>
            </li>
          </ul>
        </div>
        <div class="qui_tab_cnt tc_tab_cnt">这里是选项卡的内容</div>
      </div>

    </div>
  </div>

  <div class="widget_item">
    <div class="widget_item_title">文本输入 tc_inputText/tc_textarea</div>
    <div class="widget_item_cnt">
      <input type="text" class="qui_inputText tc_inputText" placeholder="普通文本框" />
      <textarea class="qui_textarea tc_textarea" placeholder="长文本框"></textarea>
    </div>
  </div>

</div>

<script>
  // 公共组件遮罩层效果展示
  var showMask = document.getElementById('qui_showMask'),
  maskWrap = document.getElementById('qui_maskWrap');
  if(showMask && maskWrap) {
    showMask.onclick = function(){
      maskWrap.style.display = 'block';
    }
    maskWrap.onclick = function(){
      maskWrap.style.display = 'none';
    }
  }
</script>

	<!-- footer start here -->
	<div class="agile-footer"> 
		<div class="container">
			<div class="footer-agileinfo">
				<div class="col-md-4 col-sm-6 footer-wthree-grid">
					<h6><a  href="index.html">Focus</a></h6> 
					<p>Aenean vitae metus sit amet purus sodales blandit. Nullam ut dolor eu urna viverra semper. Mauris est odio, laoreet laoreet sapien non bibendum nulla.</p>
				</div>
				<div class="col-md-3 col-sm-6 footer-wthree-grid">
					<h3>Navigation</h3>
					<ul>
						<li><a href="index.html">Home</a></li>
						<li><a href="about.html">About</a></li> 
						<li><a href="portfolio.html">Portfolio</a></li> 
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div> 
				<div class="col-md-2 col-sm-6 footer-wthree-grid">
					<h3>Archives</h3>
					<ul>
						<li><a href="single.html">Nov 2016</a></li>
						<li><a href="single.html">Oct 2016</a></li> 
						<li><a href="single.html">Sept 2016</a></li>
						<li><a href="single.html">Aug 2016</a></li> 
					</ul>
				</div> 
				<div class="col-md-3 col-sm-6 footer-wthree-grid w3social">
					<h3>Social Media</h3>
					<ul>
						<li><a href="#"><i class="fa fa-google-plus"></i> Google-plus</a></li>
						<li><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
						<li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
						<li><a href="#"><i class="fa fa-dribbble"></i> Dribbble</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>		
			</div>
		</div>
	</div> 
	<!-- //footer end here -->
	<!-- copy rights start here -->
	<div class="copyw3-agile">
		<div class="container"> 
			<p>Copyright &copy; 2017.Company name All rights reserved.</p>
		</div>
	</div>
	<!-- //copy right end here -->  
	<script src="../public/js/SmoothScroll.min.js"></script> 
	<!-- start-smooth-scrolling -->
	<script type="text/javascript" src="../public/js/move-top.js"></script>
	<script type="text/javascript" src="../public/js/easing.js"></script>	
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
			
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
	<!-- //end-smooth-scrolling -->	
	<!-- smooth-scrolling-of-move-up -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			*/
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
	<!-- //smooth-scrolling-of-move-up --> 
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../public/js/bootstrap.js"></script>
</body>
</html>
